<!DOCTYPE html>

<html>
<head>
  <title>eggTimerView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
      <ul id="jump_to">
        <li>
          <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
          <a class="small" href="javascript:void(0);">+</a>
          <div id="jump_wrapper">
          <div id="jump_page">
            
              
              <a class="source" href="app.html">
                app.coffee
              </a>
            
              
              <a class="source" href="appInstance.html">
                appInstance.coffee
              </a>
            
              
              <a class="source" href="appMessages.html">
                appMessages.coffee
              </a>
            
              
              <a class="source" href="appSettings.html">
                appSettings.coffee
              </a>
            
              
              <a class="source" href="baseList.html">
                baseList.coffee
              </a>
            
              
              <a class="source" href="baseModel.html">
                baseModel.coffee
              </a>
            
              
              <a class="source" href="countdown.html">
                countdown.coffee
              </a>
            
              
              <a class="source" href="countdownList.html">
                countdownList.coffee
              </a>
            
              
              <a class="source" href="eggTimer.html">
                eggTimer.coffee
              </a>
            
              
              <a class="source" href="scheduledTwitter.html">
                scheduledTwitter.coffee
              </a>
            
              
              <a class="source" href="aboutView.html">
                aboutView.coffee
              </a>
            
              
              <a class="source" href="baseView.html">
                baseView.coffee
              </a>
            
              
              <a class="source" href="countdownChristmasView.html">
                countdownChristmasView.coffee
              </a>
            
              
              <a class="source" href="countdownView.html">
                countdownView.coffee
              </a>
            
              
              <a class="source" href="eggTimerView.html">
                eggTimerView.coffee
              </a>
            
              
              <a class="source" href="indexView.html">
                indexView.coffee
              </a>
            
              
              <a class="source" href="statsView.html">
                statsView.coffee
              </a>
            
          </div>
        </li>
      </ul>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>eggTimerView.coffee</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              <h2>COUNTDOWN VIEW</h2>

            </div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>This is the egg timer view.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">EggTimerView</span> <span class="keyword">extends</span> <span class="title">window</span>.<span class="title">App</span>.<span class="title">BaseView</span></span></pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>Cached variables.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    seconds: <span class="number">0</span>
    selectedSize: <span class="literal">null</span>
    selectedYolk: <span class="literal">null</span></pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>Init the view.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    init: =&gt;
        <span class="property">@setDom</span> [<span class="string">"#eggImage"</span>, <span class="string">"#eggImageIn"</span>, <span class="string">"#eggSquidgy"</span>, <span class="string">"#eggFirm"</span>, <span class="string">"#eggDescription"</span>,
                 <span class="string">"#eggCountdown"</span>, <span class="string">"#eggSizeTip"</span>, <span class="string">"#butSubmit"</span>, <span class="string">"#sound"</span>]
        <span class="property">@setEvents</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>Check cookies.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        cookieSize = $.cookie <span class="string">"eggSize"</span>
        cookieYolk = $.cookie <span class="string">"eggYolk"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-6">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-6">&#182;</a>
              </div>
              <p>Set egg size based on cookies, or default to medium.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> cookieSize? <span class="keyword">and</span> cookieSize <span class="keyword">isnt</span> <span class="string">""</span>
            <span class="property">@selectedSize</span> = cookieSize
        <span class="keyword">else</span>
            <span class="property">@selectedSize</span> = <span class="string">"medium"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-7">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-7">&#182;</a>
              </div>
              <p>Set egg yolk based on cookies, or default to squidgy.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> cookieYolk? <span class="keyword">and</span> cookieYolk <span class="keyword">isnt</span> <span class="string">""</span>
            <span class="property">@selectedYolk</span> = cookieYolk
        <span class="keyword">else</span>
            <span class="property">@selectedYolk</span> = <span class="string">"squidgy"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-8">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-8">&#182;</a>
              </div>
              <p>Preset the egg size.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@dom</span>.eggImage.addClass <span class="property">@selectedSize</span></pre></div></div>
            
        </li>
        
        
        <li id="section-9">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-9">&#182;</a>
              </div>
              <p>Preset yolk type.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@selectedYolk</span> <span class="keyword">is</span> <span class="string">"squidgy"</span>
            <span class="property">@squidgyClick</span>
        <span class="keyword">else</span>
            <span class="property">@firmClick</span>()

        <span class="property">@updateDescription</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-10">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-10">&#182;</a>
              </div>
              <p>Blink the &quot;tap to change size&quot; on mobile devices.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@dom</span>.eggSizeTip.length &gt; <span class="number">0</span>
            <span class="property">@dom</span>.eggSizeTip.blink {callback: <span class="property">@hideSizeTip</span>}</pre></div></div>
            
        </li>
        
        
        <li id="section-11">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-11">&#182;</a>
              </div>
              <p>Bind events to DOM elements.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    setEvents: =&gt;
        <span class="property">@dom</span>.eggImage.click <span class="property">@eggClick</span>
        <span class="property">@dom</span>.eggSquidgy.click <span class="property">@squidgyClick</span>
        <span class="property">@dom</span>.eggFirm.click <span class="property">@firmClick</span>

        <span class="property">@dom</span>.butSubmit.click <span class="property">@startTimer</span></pre></div></div>
            
        </li>
        
        
        <li id="section-12">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-12">&#182;</a>
              </div>
              <p>Fade out the &quot;tap to change size&quot; tooltip.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    hideSizeTip: =&gt;
        <span class="function"><span class="title">hideCallback</span></span> = =&gt; <span class="property">@dom</span>.eggSizeTip.fadeOut App.Settings.EggTimer.fadeDelay
        setTimeout hideCallback, App.Settings.EggTimer.tooltipDelay</pre></div></div>
            
        </li>
        
        
        <li id="section-13">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-13">&#182;</a>
              </div>
              <p>Update the egg description based on the selected size and egg yolk.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    updateDescription: =&gt;
        <span class="property">@dom</span>.eggDescription.html App.Messages[<span class="string">"<span class="subst">#{@selectedYolk}</span>EggMsg"</span>].replace <span class="string">"{size}"</span>, App.Messages[<span class="property">@selectedSize</span>]</pre></div></div>
            
        </li>
        
        
        <li id="section-14">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-14">&#182;</a>
              </div>
              <p>When user clicks an egg, highlight and set its size as selected.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    eggClick: (e) =&gt;
        <span class="keyword">if</span> <span class="property">@dom</span>.eggImage.hasClass <span class="string">"medium"</span>
            <span class="property">@selectedSize</span> = <span class="string">"large"</span>
        <span class="keyword">else</span> <span class="keyword">if</span> <span class="property">@dom</span>.eggImage.hasClass <span class="string">"large"</span>
            <span class="property">@selectedSize</span> = <span class="string">"xlarge"</span>
        <span class="keyword">else</span>
            <span class="property">@selectedSize</span> = <span class="string">"medium"</span>

        <span class="property">@dom</span>.eggImage.removeClass().addClass <span class="property">@selectedSize</span>
        <span class="property">@updateDescription</span>()

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"EggTimerView.eggClick"</span>, <span class="string">"Selected size: <span class="subst">#{@selectedSize}</span>"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-15">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-15">&#182;</a>
              </div>
              <p>Selects the &quot;squidgy&quot; egg style.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    squidgyClick: (e) =&gt;
        <span class="property">@dom</span>.eggFirm.removeClass <span class="string">"active"</span>
        <span class="property">@dom</span>.eggSquidgy.addClass <span class="string">"active"</span>
        <span class="property">@selectedYolk</span> = <span class="string">"squidgy"</span>
        <span class="property">@updateDescription</span>()

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"EggTimerView.squidgyClick"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-16">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-16">&#182;</a>
              </div>
              <p>Selects the &quot;firm&quot; egg style.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    firmClick: (e) =&gt;
        <span class="property">@dom</span>.eggSquidgy.removeClass <span class="string">"active"</span>
        <span class="property">@dom</span>.eggFirm.addClass <span class="string">"active"</span>
        <span class="property">@selectedYolk</span> = <span class="string">"firm"</span>
        <span class="property">@updateDescription</span>()

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"EggTimerView.firmClick"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-17">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-17">&#182;</a>
              </div>
              <p>Start the egg timer. The seconds will be set depending on egg size and yolk.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    startTimer: =&gt;
        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"EggTimerView.startTimer"</span>, <span class="property">@selectedSize</span>, <span class="property">@selectedYolk</span>

        <span class="keyword">if</span> <span class="property">@selectedSize</span> <span class="keyword">is</span> <span class="string">"xlarge"</span>
            <span class="property">@seconds</span> = <span class="number">360</span>
        <span class="keyword">else</span> <span class="keyword">if</span> <span class="property">@selectedSize</span> <span class="keyword">is</span> <span class="string">"large"</span>
            <span class="property">@seconds</span> = <span class="number">300</span>
        <span class="keyword">else</span>
            <span class="property">@seconds</span> = <span class="number">240</span></pre></div></div>
            
        </li>
        
        
        <li id="section-18">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-18">&#182;</a>
              </div>
              <p>Increase seconds for firm eggs by 1.5 times.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@selectedType</span> <span class="keyword">is</span> <span class="string">"firm"</span>
            <span class="property">@seconds</span> = <span class="property">@seconds</span> * <span class="number">1.5</span></pre></div></div>
            
        </li>
        
        
        <li id="section-19">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-19">&#182;</a>
              </div>
              <p>Hide yolk selectors and button, show the inside egg.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@dom</span>.butSubmit.remove()
        <span class="property">@dom</span>.eggSquidgy.animate {opacity: <span class="number">0</span>}, App.Settings.EggTimer.fadeDelay
        <span class="property">@dom</span>.eggFirm.animate {opacity: <span class="number">0</span>}, App.Settings.EggTimer.fadeDelay
        <span class="property">@dom</span>.eggImage.unbind <span class="string">"click"</span>
        <span class="property">@dom</span>.eggImageIn.addClass(<span class="property">@selectedSize</span>).show()

        <span class="function"><span class="title">animateCallback</span></span> = =&gt; <span class="property">@dom</span>.eggImageIn.animate {opacity: <span class="number">0</span>}, (<span class="property">@seconds</span> - App.Settings.EggTimer.blinkInSeconds) * <span class="number">1000</span>
        <span class="property">@dom</span>.eggImageIn.animate {opacity: <span class="number">1</span>}, App.Settings.EggTimer.fadeDelay, animateCallback</pre></div></div>
            
        </li>
        
        
        <li id="section-20">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-20">&#182;</a>
              </div>
              <p>Start the countdown.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@doCountdown</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-21">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-21">&#182;</a>
              </div>
              <p>Save cookies.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        $.cookie <span class="string">"eggSize"</span>, <span class="property">@selectedSize</span>, {expires: App.Settings.General.cookieExpires}
        $.cookie <span class="string">"eggYolk"</span>, <span class="property">@selectedYolk</span>, {expires: App.Settings.General.cookieExpires}</pre></div></div>
            
        </li>
        
        
        <li id="section-22">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-22">&#182;</a>
              </div>
              <p>Post data to the database.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@submitEggTimer</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-23">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-23">&#182;</a>
              </div>
              <p>Decrease the timer every second and update the message.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    doCountdown: =&gt;
        <span class="property">@dom</span>.eggCountdown.html App.Messages.eggReadyInSeconds.replace <span class="string">"{seconds}"</span>, <span class="property">@seconds</span>

        <span class="keyword">if</span> <span class="property">@seconds</span> &gt; <span class="number">0</span>
            <span class="property">@seconds</span>--
            setTimeout <span class="property">@doCountdown</span>, <span class="number">1000</span></pre></div></div>
            
        </li>
        
        
        <li id="section-24">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-24">&#182;</a>
              </div>
              <p>Blink the inner egg when it&#39;s almost ready.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>            <span class="keyword">if</span> <span class="property">@seconds</span> <span class="keyword">is</span> App.Settings.EggTimer.blinkInSeconds
                <span class="property">@dom</span>.eggImageIn.stop().blink {delay: <span class="number">1950</span>, repeat: App.Settings.EggTimer.blinkInSeconds / <span class="number">2</span>}
        <span class="keyword">else</span>
            <span class="property">@onFinish</span>()</pre></div></div>
            
        </li>
        
        
        <li id="section-25">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-25">&#182;</a>
              </div>
              <p>When timer is over shake the egg, play a sound and hide unecessary elements.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    onFinish: =&gt;
        <span class="property">@dom</span>.eggCountdown.hide()
        <span class="property">@dom</span>.eggImageIn.hide()
        <span class="property">@dom</span>.eggImage.addClass(<span class="string">"finished"</span>).shake()</pre></div></div>
            
        </li>
        
        
        <li id="section-26">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-26">&#182;</a>
              </div>
              <p>Shake egg and play sound now, and then again after a few seconds.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="property">@dom</span>.eggImage.shake {duration: App.Settings.EggTimer.shakeDuration}
        <span class="property">@playSound</span>()
        setTimeout <span class="property">@playSound</span>, App.Settings.EggTimer.repeatAlertAfter

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"EggTimerView.onFinish"</span></pre></div></div>
            
        </li>
        
        
        <li id="section-27">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-27">&#182;</a>
              </div>
              <p>Play the bell. This will happen twice when the timer is over.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    playSound: =&gt;
        <span class="property">@dom</span>.sound[<span class="number">0</span>].pause()
        <span class="property">@dom</span>.sound[<span class="number">0</span>].currentTime = <span class="number">0</span>
        <span class="property">@dom</span>.sound[<span class="number">0</span>].play()</pre></div></div>
            
        </li>
        
        
        <li id="section-28">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-28">&#182;</a>
              </div>
              <p>Post <a href="eggTimer/html">Egg Timer</a> details to the remote database.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>    submitEggTimer: =&gt;
        egg = <span class="keyword">new</span> App.EggTimer()
        egg.set <span class="string">"size"</span>, <span class="property">@selectedSize</span>
        egg.set <span class="string">"yolk"</span>, <span class="property">@selectedYolk</span></pre></div></div>
            
        </li>
        
        
        <li id="section-29">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-29">&#182;</a>
              </div>
              <p>Save egg timer to the database. Don&#39;t care if it&#39;s successful or not.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        egg.save()

        <span class="keyword">if</span> App.Settings.General.debug
            console.log <span class="string">"EggTimerView.submitEggTimer"</span>, egg.attributes</pre></div></div>
            
        </li>
        
        
        <li id="section-30">
            <div class="annotation">
              
              <div class="pilwrap for-h2">
                <a class="pilcrow" href="#section-30">&#182;</a>
              </div>
              <h2>APPEND VIEW TO WINDOW</h2>

            </div>
            
        </li>
        
        
        <li id="section-31">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-31">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre>window.App.currentView = <span class="keyword">new</span> EggTimerView()</pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
